<template>
	<view>
		<!-- 主体 -->
		<view class="page page-bottom-bar book-group">
			<!-- 联系人信息 -->
			<view class="book-info flex-row-start box-shadow" @click="goNext('/pages/my/addressList?mode=choose')">
				<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/group/icon-addr.png"></image>
				<view class="info flex-1" v-if="addressobj.id">
					<view class="font14 clearfix">
						<text>{{addressobj.name}}</text>
						<text class="tel font-999999">{{addressobj.mobile}}</text>
						<uni-icons class="fr" type="arrowright" size="12" color="#9a9a9a"></uni-icons>
					</view>
					<view class="addr font14 font-666666">
						{{addressobj.province}}{{addressobj.city}}{{addressobj.area}}{{addressobj.address}}
					</view>
				</view>
				<view v-else class="info font-1e1e1e font14">暂无收货地址,点击添加地址</view>
			</view>
			<!-- 订单信息 -->
			<view class="book-detail font14 box-shadow">
				<view class="goods flex-row-start">
					<image class="left bg-cover" :src="goodsobj.logo" mode=""></image>
					<view class="right flex-1 flex-column-between">
						<view>
							<text class="font14">{{goodsobj.goods_name?goodsobj.goods_name:''}}</text>
							<text class="number font12 font-999999">X
								{{goodsobj.total_num?goodsobj.total_num:''}}</text>
						</view>
						<view class="flex-row-between">
							<view class="font18 font-assist"><text
									class="font11">￥</text>{{goodsobj.goods_price?goodsobj.goods_price:''}}
							</view>
							<view>
								<text class="font12">共计：</text>
								<text class="font11 font-assist">￥</text>
								<text class="font14 font-assist">{{goodsobj.total_price?goodsobj.total_price:''}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="dataobj.is_chief==1">
					<view>团长优惠</view>
					<view>-￥ {{dataobj.chief_reduce}}</view>
				</view>
				<view class="item" @tap="openCoupon">
					<view>优惠券</view>
					<view :style="{color: couponobj.id ? '#1e1e1e' : '#c8c8c8'}">
						<text>{{couponobj.id ? '-￥'+couponobj.reduce : '请选择优惠券'}}</text>
						<uni-icons type="arrowright" size="10" color="#9a9a9a"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view>运费</view>
					<view>￥ {{dataobj.express_price?dataobj.express_price:''}}</view>
				</view>
				<view class="item nob">
					<view>备注</view>
				</view>
				<textarea :value="remarks" @input="Onremarks" placeholder="请输入备注内容"
					placeholder-style="color:#c8c8c8;"></textarea>
			</view>
		</view>
		<!-- 支付倒计时 -->
		<view class="time_end timeE_flex flex-row-start font-ff3c37 font11" v-if="timeobj.show">
			<text>温馨提示:订单将于</text>
			<text>{{timeobj.day>0?timeobj.day+'天':''}}</text>
			<text>{{timeobj.hour>0?timeobj.hour+'小时':''}}</text>
			<text>{{timeobj.minute}}分</text>
			<text>{{timeobj.second}}秒</text>
			<text>之后自动取消</text>
		</view>
		<!-- 合计信息 -->
		<view class="book-bar flex-row-between flex-start">
			<view class="price font15">合计:<text
					class="font-assist">￥{{utils.priceStr(dataobj.price?dataobj.price:0)[0]}}.{{utils.priceStr(dataobj.price?dataobj.price:0)[1]}}</text>
			</view>
			<view @click="OnSubmit" class="btn tc font15 font-ffffff">立即支付</view>
		</view>
		<!-- 弹窗（优惠券） -->
		<bottomPopup ref="coupon" title="选择优惠券" :btnMargin="'60rpx auto;'">
			<scroll-view :scroll-y="true" v-if="dataobj.order_coupon_list.length > 0" class="popup-coupons">
				<view class="coupon-item flex-row-start" v-for="(item, index) in dataobj.order_coupon_list"
					:key="index">
					<view class="left flex-column-center">
						<view class="tag">{{item.coupon.coupon_type_name}}</view>
						<view class="font12 font-assist">
							<!-- 10满减卷 30立即卷 -->
							<text v-if="item.coupon.coupon_type==10 || item.coupon.coupon_type==30">￥</text>
							<text v-if="item.coupon.coupon_type==10 || item.coupon.coupon_type==30"
								class="dis">{{item.coupon.reduce_money}}</text>
							<!-- 20折扣卷 -->
							<text v-if="item.coupon.coupon_type==20" class="dis">{{item.coupon.discount*10}}折</text>
						</view>
					</view>
					<view class="right flex-column-between">
						<view class="font13">{{item.coupon.title}}</view>
						<!-- 10满减卷 -->
						<view v-if="item.coupon.coupon_type==10" class="font12 font-assist">
							满{{item.coupon.full_money}}使用</view>
						<!-- 20折扣卷 30立即卷 -->
						<view v-if="item.coupon.coupon_type==20 || item.coupon.coupon_type==30"
							class="font12 font-assist">无限制</view>
						<view class="font12 font-969696">有效期至{{item.coupon.end_time}}</view>
					</view>
					<view @click="Onreduce(item)" class="get font12 font-ffffff tc">{{item.choois?'取消':'立即使用'}}</view>
				</view>
			</scroll-view>
			<view v-else class="content coupon-empty">
				<image class="img" src="https://static.newbeaconhotels.com/app/hotel/empty.png"></image>
				<view class="txt font13 font-969696 tc">暂无优惠券</view>
			</view>
		</bottomPopup>
	</view>
</template>

<script module="utils" lang="wxs" src="../../common/js/utils.wxs"></script>
<script>
	import bottomPopup from "@/components/j-bottomPopup/index.vue";
	export default {
		components: {
			bottomPopup
		},
		data() {
			return {
				code: '', //订单code
				dataobj: {}, //数据
				goodsobj: {}, //商品数据
				addressobj: {}, //地址
				remarks: '', //备注
				openid: null,
				wxSdk: false, // H5签名是否成功（此页面用于唤起支付）
				wx_code: '',
				imgFullUrl: this.$Config.http_static, //图片地址
				themeColor: '#03004c',
				couponobj: {}, //使用的优惠券
				spell_pay_time: 0, //共配时间
				timer: null, // 定时器
				nowTime: '', //当前时间
				timeobj: {}, //倒计时时间
			}
		},
		onLoad: function(options) {
			let query = {}
			if (this.$Route.query.scene) {
				query = this.$base.OnWxoptions(this.$Route.query.scene)
			} else {
				query = options
			}
			// #ifdef H5
			this.$wxapi.OnwxSdk().then(res => {
				if (res.code == 1) {
					this.wxSdk = true
					// this.Onshare()
				} else {
					this.wxSdk = false
				}
			})
			this.openid = uni.getStorageSync("openid");
			// #endif
			this.code = query.code
			//公共配置
			this.OngroupBuy()
			// 开启监听选择收货地址事件，如果有值就关闭默认地址
			uni.$on('chooseAddr', (res) => {
				this.addressobj = res
			})
		},
		onHide: function() {
			// 清空定时器
			// clearInterval(this.timer)
			// this.timer = null
		},
		onUnload: function() {
			// 关闭监听选择收货地址事件
			uni.$off('chooseAddr')
			// 清空定时器
			// clearInterval(this.timer)
			// this.timer = null
		},
		onShow() {

		},
		methods: {
			//公共配置
			OngroupBuy() {
				this.$Http({
					url: 'groupBuy',
					token: true,
					data: {},
				}).then(res => {
					if (res.code == 1) {
						this.spell_pay_time = res.data.spell_pay_time
						// 商品详情
						this.OnOrder()
					}
				});
			},
			//查询详情
			OnOrder() {
				this.$Http({
					url: 'detailsOrder',
					token: true,
					type: 'POST',
					data: {
						order_code: this.code
					},
					show: true,
				}).then(res => {
					if (res.code == 1) {
						if (res.data.address_id) {
							this.addressobj = {
								id: res.data.address_id,
								name: res.data.address_user_name,
								mobile: res.data.address_user_phone,
								province: res.data.province,
								city: res.data.city,
								area: res.data.region,
								address: res.data.address_user_addr,
							}
						} else {
							this.getList()
						}
						res.data.order_goods.logo = this.imgFullUrl + res.data.order_goods.logo
						this.dataobj = res.data
						this.goodsobj = res.data.order_goods
						this.nowTime = Math.round(new Date().getTime());
						if (res.data.pay_status == 2 && res.data.order_status == 10 && res.data.is_spell == 0) {
							this.getMessage()
							clearInterval(this.timer)
							this.timer = setInterval(this.getMessage, 1000)
						} else {
							this.timeobj = {}
						}
						//计算价格
						this.Oncount()
					}
				});
			},
			//计时器
			getMessage() {
				var end = this.spell_pay_time / 2 * 1000 + (this.dataobj.createtime * 1000)
				var ms = end - this.nowTime;
				var timeobj = {}
				if (ms > 0) {
					this.nowTime = this.nowTime + 1000
					var day = Math.floor(ms / (1000 * 60 * 60 * 24));
					var hour = Math.floor(ms / (1000 * 60 * 60)) % 24;
					if (day > 0) {
						hour = (day * 24) + hour
					}
					var minute = Math.floor(ms / (1000 * 60)) % 60;
					var second = Math.floor(ms / 1000) % 60;
					minute = minute > 9 ? minute : '0' + minute.toString()
					second = second > 9 ? second : '0' + second.toString()
					timeobj = {
						'day': day,
						'hour': hour,
						'minute': minute,
						'second': second,
						'show': true
					}
				} else {
					timeobj = {}
					clearInterval(this.timer)
					this.$Router.replace('/pages/group/orderList')
				}
				this.$forceUpdate()
				this.timeobj = timeobj
			},
			//计算价格
			Oncount() {
				let price = 0
				let all_price = this.dataobj.total_price
				//团长优惠
				if (this.dataobj.is_chief == 1) {
					all_price = this.$base.numSub(all_price, this.dataobj.chief_reduce)
				}
				//优惠券
				if (this.couponobj.id) {
					let obj = this.couponobj
					//满减和立减
					if (obj.coupon.coupon_type == 10 || obj.coupon.coupon_type == 30) {
						all_price = this.$base.numSub(all_price, Number(obj.coupon.reduce_money))
						this.couponobj.reduce = obj.coupon.reduce_money
					}
					//折扣
					if (obj.coupon.coupon_type == 20) {
						let is_price = 0
						is_price = this.$base.numMulti(all_price, obj.coupon.discount)
						all_price = this.$base.numSub(all_price, is_price)
						this.couponobj.reduce = is_price
					}
				}
				if (all_price < 0) {
					all_price = 0
				}

				price = this.$base.numAdd(all_price, this.dataobj.express_price) //运费+总价
				this.dataobj.price = price
			},
			// 地址列表
			getList() {
				this.$Http({
					url: 'address',
					token: true,
				}).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.addressobj = res.data.data[0]
							res.data.data.forEach(item => {
								if (item.status == 'normal') {
									this.addressobj = item
								}
							})
						} else {
							this.addressobj = {}
						}
					}
				});
			},
			//备注
			Onremarks(e) {
				this.remarks = e.detail.value
			},
			OnSubmit(){
				// #ifdef MP-WEIXIN
				wx.login({
					success: res => {
						this.wx_code = res.code
						this.OnSubmit1()
					}
				})
				// #endif
				// #ifdef H5
				this.OnSubmit1()
				// #endif
			},
			//提交
			OnSubmit1() {
				if (!this.addressobj.id) {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请先添加收货地址'
					});
					return
				}
				let data = {
					order_id: this.dataobj.id,
					order_coupon_id: this.couponobj.id ? this.couponobj.id : '',
					address_id: this.addressobj.id,
					remarks: this.remarks
				}
				let that = this
				// #ifdef MP-WEIXIN
				data.source = 2
				data.code = this.wx_code
				// #endif
				// #ifdef H5
				data.source = 1
				// #endif
				this.$Http({
					url: 'payOrder',
					token: true,
					type: 'POST',
					data: data,
				}).then(res => {
					if (res.code == 1) {
						// 支付
						this.Onpay(res.data)
					} else if (res.code == 2) {
						//0元支付
						//拼团购买
						if (that.dataobj.is_spell == 1) {
							that.$Router.replace('/pages/group/progress?id=' + that.dataobj.order_spell_id)
						} else {
							that.$Router.replace('/pages/group/orderList')
						}
					} else {
						uni.showToast({
							icon: 'none',
							duration: 2000,
							title: res.msg
						});
					}
				});
			},
			// 支付
			Onpay(param) {
				var that = this
				// #ifdef MP-WEIXIN
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: param.timeStamp,
					nonceStr: param.nonceStr,
					package: param.pacKage,
					signType: 'MD5',
					paySign: param.paySign,
					success: function(res) {
						//拼团购买
						if (that.dataobj.is_spell == 1) {
							that.$Router.replace('/pages/group/progress?id=' + that.dataobj.order_spell_id)
						} else {
							that.$Router.replace('/pages/group/orderList')
						}
					},
					fail: function(err) {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
						that.$Router.replace('/pages/group/orderList')
					}
				});
				// #endif
				// #ifdef H5
				if (that.wxSdk) {
					this.$wxapi.OnWXPay(param).then(res => {
						console.log('OnWXPay返回：' + JSON.stringify(res))
						if (res.code == 1) {
							uni.showToast({
								title: '支付成功'
							});
							//拼团购买
							if (that.dataobj.is_spell == 1) {
								that.$Router.replace('/pages/group/progress?id=' + that.dataobj.order_spell_id)
							} else {
								that.$Router.replace('/pages/group/orderList')
							}
						} else if (res.code == 0) {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
							that.$Router.replace('/pages/group/orderList')
						} else if (res.code == 3) {
							uni.showToast({
								title: '支付取消',
								icon: 'none'
							});
							that.$Router.replace('/pages/group/orderList')
						}
					})
				} else {
					uni.showToast({
						title: '微信签名失败',
						icon: 'none'
					});
				}
				// #endif
			},
			// 打开优惠券
			openCoupon() {
				this.$refs.coupon.Onopen()
			},
			//使用优惠券
			Onreduce(e) {
				let list = this.dataobj.order_coupon_list
				list.forEach(item => {
					if (item.id == e.id) {
						//不使用
						if (e.choois) {
							item.choois = false
							this.couponobj = {}
						} else {
							//使用
							item.choois = true
							this.couponobj = item
						}
					}
				})
				this.dataobj.order_coupon_list = list
				this.$forceUpdate()
				this.Oncount()
				this.$refs.coupon.onClose()
			},
			//跳转
			goNext(url) {
				this.$Router.push(url)
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
